<template>
  <div>
    <div v-if="props.height && props.width">
      <img
        alt=""
        :src="picNotNull(imgUrl)"
        :style="{
          height:
            !isNaN(parseFloat(props.height)) && isFinite(props.height)
              ? props.height + 'px'
              : props.height,
          width:
            !isNaN(parseFloat(props.width)) && isFinite(props.width)
              ? props.width + 'px'
              : props.width
        }"
        :height="props.height"
        :width="props.width"
        @error="imgError"
      >
    </div>
    <div v-else-if="props.width">
      <img
        :src="picNotNull(imgUrl)"
        alt=""
        :width="props.width"
        @error="imgError"
      >
    </div>
    <div v-else-if="props.height">
      <img
        :src="picNotNull(imgUrl)"
        alt=""
        :height="props.height"
        @error="imgError"
      >
    </div>
    <div v-else>
      <img
        alt=""
        :src="picNotNull(imgUrl)"
        @error="imgError"
      >
    </div>
  </div>
</template>

<script setup>
import defIcon from '@/assets/img/def.png'

const props = defineProps({
  pic: {
    default: null,
    type: String
  },
  height: {
    default: null,
    type: String
  },
  width: {
    default: null,
    type: String
  }
})

const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL

const imgUrl = ref(props.pic)
const imgError = () => {
  imgUrl.value = ''
}
const picNotNull = pic => {
  const picUrl = pic?.replace(resourcesUrl, '')
  if (!pic || !picUrl) {
    return defIcon
  } else {
    return resourcesUrl + pic
  }
}
</script>
